<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head-fragment(title,path)">
    <meta charset="UTF-8">
    <title>Children's Clothing-RAREWE</title>
    <link rel="stylesheet" th:href="@{/mall/css/swiper.min.css}">
    <link rel="stylesheet" th:href="@{/mall/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/mall/css/common.css}">
    <link rel="stylesheet" th:href="@{/mall/styles/header.css}">
    <link rel="stylesheet" th:href="@{'/mall/styles/'+${path}+'.css'}">
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert/sweetalert.css}"/>
    <link rel="stylesheet" th:href="@{mall/styles/login.css}">
</head>
<nav id="nav" th:fragment="nav-fragment">
    <div class="banner_x center">
        <div class="fr">
            <div class="search">
                <input class="text" type="text" id="keyword" autocomplete="off">
                <div class="search_hot">
                </div>
            </div>
            <div class="button iconfont icon-search" onclick="search()"></div>
        </div>
    </div>
</nav>
<header id="header" th:fragment="header-fragment">
    <div class="center">
        <ul class="fl">
            <li><a th:href="@{/index}">RareweFashion Home</a></li>
        </ul>
        <div class="fr">
            <th:block th:unless="${session.newBeeMallUser==null}">
                <div class="user">
                    <a th:href="@{/orders}" style="color: whitesmoke">
                        My Order
                    </a>
                </div>
                <div class="shopcart">
                    <a th:href="@{/shop-cart}" style="color: white;"><i class="iconfont icon-cart"></i>
                        shopping cart
                        (
                        <th:block th:text="${session.newBeeMallUser.shopCartItemCount}"></th:block>
                        )</a>
                    <span>Minimum purchase quantity:</span>
                    <th:block th:text="${session.newBeeMallUser.leastSales}"></th:block>
                </div>
                <div>

                </div>
            </th:block>
            <th:block th:if="${session.newBeeMallUser==null}">
                <ul class="login">
                    <!--<li><a th:href="@{/login}">Sign In</a></li>-->
                    <!--<li><a th:href="@{/register}">注册</a></li>-->
                    <li><input type="button" value="Sign In" onclick="Show();"></li>
                </ul>
                <div class="shopcart">
                    <a href="##" style="color: white;"><i class="iconfont icon-cart"></i>
                        Shopping Cart(0)</a>
                </div>

            </th:block>
        </div>
    </div>




    <!--登录框-->
   <!-- <div id="shade" class="c1 hide"></div>-->
    <div id="modal" class="c2 hide">

        <div class="login_center">
            <div class="login_top">
                <div class="left fl">sign in</div>
                <div class="clear"></div>
                <div class="under-line"></div>
            </div>
            <form id="loginForm" onsubmit="return false;" action="##">
                <div class="login_main">
                    <div class="login-info"> &nbsp;&nbsp;&nbsp;account:&nbsp;<input class="login-info-input" type="text" name="loginName"
                                                                                    id="loginName"
                                                                                    placeholder="请输入你的手机号"/>
                    </div>
                    <div class="login-info">password:&nbsp;<input class="login-info-input"
                                                                  id="password"
                                                                  type="password"
                                                                  name="password"
                                                                  placeholder="请输入你的密码"/></div>
                    <!--<div class="login-info">
                        &nbsp;&nbsp;&nbsp;captcha:
                        <input class="login-info-input verify-code" type="text" name="verifyCode"
                               placeholder="请输入验证码" id="verifyCode"/>
                        <img alt="单击图片刷新！" style="top: 14px;position: relative;" th:src="@{/common/mall/kaptcha}"
                             onclick="this.src='/common/mall/kaptcha?d='+new Date()*1">
                    </div>-->
                </div>
                <div class="login_submit">
                    <input class="submit" type="submit" onclick="login()" value="SIGN IN">
                </div>
            </form>
        </div>
    </div>
<!--以下是登录框-->
    <script>
        function Show(){
           // document.getElementById('shade').classList.remove('hide');
            document.getElementById('modal').classList.remove('hide');
        }
        function Hide(){
           // document.getElementById('shade').classList.add('hide');
            document.getElementById('modal').classList.add('hide');
        }
    </script>


    <!-- jQuery -->
    <script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/admin/dist/js/public.js}"></script>
    <script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
    <script type="text/javascript">
        function login() {
            var loginName = $("#loginName").val();
            if (!validPhoneNumber(loginName)) {
                swal('请输入正确的登录名(即手机号)', {
                    icon: "error",
                });
                return false;
            }
            var password = $("#password").val();
            if (!validPassword(password)) {
                swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                    icon: "error",
                });
                return false;
            }
           /* var verifyCode = $("#verifyCode").val();
            if (!validLength(verifyCode, 7)) {
                swal('请输入正确的验证码', {
                    icon: "error",
                });
                return false;
            }*/
            //验证
            var params = $("#loginForm").serialize();
            var url = '/login';
            $.ajax({
                type: 'POST',//方法类型
                url: url,
                data: params,
                success: function (result) {
                    if (result.resultCode == 200) {
                        window.location.href = '/index';
                    } else {
                        swal(result.message, {
                            icon: "error",
                        });
                    }
                    ;
                },
                error: function () {
                    swal("操作失败", {
                        icon: "error",
                    });
                }
            });
        }
    </script>
</header>
</html>
